import * as React from 'react';
import { Form, Input, Modal, Select, message, Upload, Button } from 'antd';
import request from '@/http';

import { UploadOutlined } from '@ant-design/icons';
import SecurityService from '@/pages/login/service';

interface ImportObject {
  isModalVisible: boolean;
  id?: number;
  repeat?: string;
}

const Import = (props: { editObject: ImportObject; onClose: any }) => {
  const { Option } = Select;
  const { editObject, onClose } = props;
  const [isModalVisible, setIsModalVisible] = React.useState(false);
  const [formObject] = Form.useForm();

  const modelOnOk = async (e: any) => {
    // const data = await formObject.validateFields();
    console.log(formObject.getFieldsValue());
    const formData = new FormData();
    formData.append('file', e);
    console.log(formData);
    const result: any = await request.post(
      '/api/admin/attendance/ExportExcel',
      {
        excelFile: formData,
        type: 1,
      },
      {
        headers: 'form-data',
      },
    );
  };

  const modelOnCancel = () => {
    setIsModalVisible(false);
  };

  React.useEffect(() => {
    setIsModalVisible(editObject.isModalVisible);
    if (editObject.id !== null) {
      formObject.setFieldsValue({
        repeat: editObject.repeat,
      });
    }
  }, [editObject]);

  //提交文件但没有上传
  const beforeUpload = () => {
    return false;
  };
  return (
    <>
      <Modal
        width={800}
        className="modal"
        title="导入"
        visible={isModalVisible}
        onCancel={modelOnCancel}
        onOk={modelOnOk}
      >
        <Form
          className="form"
          name="editForm"
          form={formObject}
          preserve={false}
        >
          <Form.Item label="上传文件">
            <Upload beforeUpload={beforeUpload}>
              <Button icon={<UploadOutlined />}>上传文件</Button>
            </Upload>
          </Form.Item>
          <Form.Item label="打卡记录重复">
            <Select
              className="itemAttendanceSelect"
              placeholder="请选择..."
              allowClear
            >
              <Option value={0}>终止</Option>
              <Option value={1}>覆盖</Option>
            </Select>
          </Form.Item>
        </Form>
      </Modal>
    </>
  );
};
export { Import, ImportObject };
